<template>
  <div class="sortingChange">
    <zyInfoPanel title="分拣中心信息" :showUnfoldButton="false" class="sortingBaseInfo">
      <zy-modal-info :model-info="sortingInfo" class="sortingBaseContent"></zy-modal-info>
    </zyInfoPanel>
    <zyInfoPanel title="附件上传" :showUnfoldButton="false" class="sortingImgInfo">
      <div class="sortingImgContent">
        <div class="imgItem">
          <div class="itemTitle required">营业执照（副本）</div>
          <div class="itemContent">
            <el-upload
                class="upload-demo"
                drag
                action=""
                :httpRequest="uploadFile"
                :data="{type: 'license_img'}"
                accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                :show-file-list="false"
            >
              <zy-image v-model="license_img" v-if="license_img" @removeImage="removeImage(license_img)"></zy-image>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请上传营业执照（副本）
              </div>
            </el-upload>
          </div>
        </div>
        <div class="imgItem card">
          <div class="itemTitle required">身份证</div>
          <div class="itemContent">
            <el-upload
                class="upload-demo"
                drag
                action=""
                :httpRequest="uploadFile"
                :data="{type: 'legal_card_pros'}"
                accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                :show-file-list="false"
            >
              <zy-image v-model="legal_card_pros" v-if="legal_card_pros"
                        @removeImage="removeImage(legal_card_pros)"></zy-image>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请上传身份证正面
              </div>
            </el-upload>
            <el-upload
                class="upload-demo"
                drag
                action=""
                :httpRequest="uploadFile"
                :data="{type: 'legal_card_cons'}"
                accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                :show-file-list="false"
            >
              <zy-image v-model="legal_card_cons" v-if="legal_card_cons"
                        @removeImage="removeImage(legal_card_cons)"></zy-image>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请上传身份证反面
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="btnArea">
        <zy-button type="primary" @click="submit" class="btn">提交</zy-button>
        <zy-button @click="closeSorting" class="btn">返回</zy-button>
      </div>
    </zyInfoPanel>
  </div>
</template>

<script>
	export default {
		name: "SsortingChange",
		props: {},
		data() {
			return {
				sortingInfo: [
					{
						title: '分拣站名称',
						name: 'company_name',
						type: 'input',
						maxlength: '50',
						value: '',
						titleClass: 'required'
					},
					{
						title: '统一社会信用代码',
						name: 'organization_code',
						type: 'input',
						readonly: true,
						value: '',
					},
					{
						title: '法人姓名',
						name: 'legal_person',
						type: 'input',
						maxlength: '20',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人联系方式',
						name: 'legal_phone',
						type: 'input',
						tag: 'mobile',
						value: '',
						titleClass: 'required'
					},
					{
						title: '法人身份证号码',
						name: 'legal_card_no',
						type: 'input',
						maxlength: '18',
						value: '',
						titleClass: 'required'
					},
					{
						title: '负责人',
						name: 'control_man',
						type: 'input',
						maxlength: '100',
						value: '',
						titleClass: 'required'
					},
					{
						title: '负责人联系方式',
						name: 'control_phone',
						type: 'input',
						tag: 'mobile',
						value: '',
						titleClass: 'required'
					},
					{
						title: '分拣站地址',
						name: 'address',
						type: 'location',
						btnName: '定位',
						value: {},
						titleClass: 'required'
					},
				],
				license_img: '',
				legal_card_pros: '',
				legal_card_cons: '',
			};
		},
		computed: {},
		watch: {
			sortingInfo:{
				handler(newVal){
					console.log(newVal);
				},
        deep: true
      }
    },
		components: {},
		methods: {
			getData() {
				this.$axios.post(this.$api.companyInfo, {}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.sortingInfo = this.sortingInfo.filter(item => {
							if (item.name === 'address') {
								item.value = {
									address: data.company_address,
									lat: data.lat,
									lng: data.lng,
								}
							} else {
								for (var key in data) {
									if (item.name === key) {
										item.value = data[item.name];
									}
								}
							}
							return item;
						});
						this.license_img = data.license_img;
						this.legal_card_pros = data.legal_card_pros;
						this.legal_card_cons = data.legal_card_cons;
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			uploadFile(params) {
				let type = params.data.type;
				this.$axios.post(this.$api.uploadFile, {
					isFile: true,
					file: params.file,
					operator: 'goods',
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this[type] = res.data.url;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			removeImage(type) {
				this[type] = '';
			},
			submit() {
				let {postData, tipText} = this.$dataValidation(this.sortingInfo);
				if (tipText) {
					return this.$message.error(tipText);
				}
				if (!this.license_img) {
					return this.$message.error('请上传营业执照（副本）');
				}
				if (!this.legal_card_pros) {
					return this.$message.error('请上传身份证正面');
				}
				if (!this.legal_card_cons) {
					return this.$message.error('请上传身份证反面');
				}
				postData['license_img'] = this.license_img;
				postData['legal_card_pros'] = this.legal_card_pros;
				postData['legal_card_cons'] = this.legal_card_cons;
				postData.company_address = postData.address.address;
				postData.lng = postData.address.lng;
				postData.lat = postData.address.lat;
				postData.company_type = this.company_type;
				delete postData.address;
				this.$axios.post(this.$api.editCompanyInfo, {
					...postData
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.closeSorting();
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			closeSorting() {
				this.$blackRoute({path: '/sorting/sorting_station', that: this})
			}
		},
		mounted() {
			this.getData()
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/sortingInfo/sortingChange/index.less">

</style>
